<template>
	<view class="login-body">
		<view class="login-content">
			<form class="from" @submit='submit'>
				<s-input placeholder="账号" name='username' v-model='form.username'>
				</s-input>
				<s-input placeholder="密码" name='password' v-model='form.password' type="password">
				</s-input>
				<button class="submit-btn" form-type="submit">登录</button>
			</form>
			<view class="btn" @click="turnover">
				<sxran-im-text class="" text='注册' size="14" type='primary'></sxran-im-text>
			</view>
		</view>
	</view>
</template>

<script>
	import SInput from './input.vue';
	export default {
		name: 'login',
		components: {
			SInput
		},
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
			}
		},
		methods: {
			turnover(){
				this.$emit('turnover')
			},
			submit(event) {
				const {
					value
				} = event.detail;
				
				if(!value.username){
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return;
				}
				if(!value.password){
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return;
				}
				
				uni.$Im.login(uni.$Im.config.api + '/api/user/login', {
					...value,
					"captcha": "",
					"userId": value.username
				}).then(res => {
					if(res.code == 0){
						uni.redirectTo({
							url: '/uni_modules/sxran-im-modules/pages/index/index'
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-body {
		.login-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.form {}

			.submit-btn {
				padding: 0;
				background: rgba(255, 255, 255, .2);
				border: none;
				border-radius: 35px;
				box-shadow: 0 25px 45px rgba(0, 0, 0, .5);
				border-right: 1px solid rgba(255, 255, 255, .2);
				border-bottom: 1px solid rgba(255, 255, 255, .2);
				// letter-spacing: 20px;
				box-shadow: 2px 3px rgba(0, 0, 0, 0.03);

				&::after {
					border: none;
				}
			}
		}

		.btn {
			margin: 20px auto;
			// letter-spacing: 20px;
			cursor: pointer;
		}
	}
</style>